<template>
    <div class="scroll"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
            <li v-for="item in list">{{ item }}</li>
    </div>
</template>
<script>


export default {
    data() {
        return {
            loading: false,
            list: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
        }
    },
    methods: {
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                let last = this.list[this.list.length - 1];
                for (let i = 1; i <= 10; i++) {
                    this.list.push(last + i);
                }
                this.loading = false;
            }, 3000);
        }
    },
}
</script>
<style lang="scss" scoped>
.scroll {
    overflow-y: auto;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
</style>